<template>
  <div class="input-search">
    <i class="bi bi-search"></i>
    <input
      class="input"
      type="text"
      maxlength="20"
      minlength="1"
      placeholder="请输入搜索内容......"
      :oninput="Search"
      :onkeyup="OnEnter"
    />
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
export default {
  setup(props, { emit }) {
    function Search(e) {
      emit("onInputSearch", e.target.value);
    }

    function OnEnter(e) {
      if (e.code == "Enter") {
        emit("onSearch", e);
      }
    }
    return { Search, OnEnter };
  },
};
</script>

<style scoped>
.input {
  border: none;
  outline: none;
  margin-left: 0.5rem;
  transition: 0.1s;
}
.input-search {
  border: 1.5px solid gray;
  padding: 0.5rem;
  display: flex;
  justify-content: start;
  vertical-align: middle;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
}
.input:focus input-search {
  border-color: red;
}
.input,
.bi {
  font-size: 1rem;
  color: gray;
}
</style>
